<template>
    <div class="bottom-view">
        <el-card shadow="hover" class="view">
            <template #header>
                <div>关键词搜索</div>
            </template>
            <div class="search-view">
                <div class="chart-wrap">
                    <div class="chart">
                        <div class="title">搜索用户数</div>
                        <div class="count">{{ numberFormat(lineChartData.totalUser) }}</div>
                        <v-chart :option="getLineOption('userList', '搜索用户数')" autoresize></v-chart>
                    </div>
                    <div class="chart">
                        <div class="title">搜索量</div>
                        <div class="count">{{ numberFormat(lineChartData.totalCount) }}</div>
                        <v-chart :option="getLineOption('countList', '搜索量')" autoresize></v-chart>
                    </div>
                </div>
                <div class="search-table">
                    <el-table :data="tableData">
                        <el-table-column label="排名" prop="rankNo" />
                        <el-table-column label="关键字" prop="word" />
                        <el-table-column label="搜索数量" prop="count" />
                        <el-table-column label="搜索用户数" prop="user" />
                        <el-table-column label="搜索占比" prop="Proportion" />
                    </el-table>
                </div>
                <el-pagination layout="prev, pager, next" :total="tableTotalData.length" />
            </div>
        </el-card>
        <el-card shadow="hover" class="view">
            <template #header>
                <div>分类销售排行</div>
                <el-radio-group v-model="radioSelect" size="small">
                    <el-radio-button label="品类" />
                    <el-radio-button label="商品" />
                </el-radio-group>
            </template>
            <div class="search-view">
                <v-chart :option="getPieOption()" autoresize />
            </div>
        </el-card>
    </div>
</template>

<script lang="ts">
export default {
    name: 'Footer'
}
</script>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useReportDataStore } from '@/stores/reportData'
import useFormat from '@/hooks/userForm';


const reportDataStore = useReportDataStore()
const { numberFormat } = useFormat()
const radioSelect = ref('品类')
const currentPage = ref(1)
const pageSize = ref(5)

const searchWord = computed(() => reportDataStore.reportData.searchWord)
const saleRank = computed(() => reportDataStore.reportData.saleRank)



// 处理数据,添加百分比
const tableTotalData = computed(() => {
    if (!searchWord.value) return []
    return searchWord.value.map((item, index) => {
        return {
            ...item,
            rankNo: index + 1,
            Proportion: (item.user / item.count * 100).toFixed(2) + '%'
        }
    })
})

// 数据过多，裁剪到每一页
const tableData = computed(() => {
    return tableTotalData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
})

const lineChartData = computed(() => {
    const data = {
        wordList: [] as string[],
        userList: [] as number[],
        countList: [] as number[],
        totalUser: 0,
        totalCount: 0
    }
    if (tableTotalData.value && tableTotalData.value.length > 0) {
        tableTotalData.value.forEach(item => {
            data.wordList.push(item.word)
            data.userList.push(item.user)
            data.countList.push(item.count)
            data.totalUser += item.user
            data.totalCount += item.count
        })
    }

    return data
})

const pieChartData = computed(() => {
    const data = {
        categoryList: [] as any[],
        cTotal: 0,
        goodsList: [] as any[],
        gTotal: 0
    }

    if (saleRank.value) {
        const { category: { axisX, data1 }, goods: { axisX: axisX2, data1: data2 } } = saleRank.value
        const total = data1.reduce((pre, item) => pre + item, 0)
        data.cTotal = total

        axisX.forEach((item, index) => {
            const percent = (data1[index] / total * 100).toFixed(2) + '%'
            data.categoryList.push({
                name: item + '|' + percent,
                value: data1[index],
                percent,
                labelName: item
            })
        })

        const total2 = data2.reduce((pre, item) => pre + item, 0)
        data.gTotal = total2
        axisX2.forEach((item, index) => {
            const percent = (data2[index] / total2 * 100).toFixed(2) + '%'
            data.goodsList.push({
                name: item + '|' + percent,
                value: data2[index],
                percent,
                labelName: item
            })
        })
    }

    return data
})

// 线状图
const getLineOption = (listName: 'userList' | 'countList', name: string) => {
    return {
        xAxis: {
            data: lineChartData.value.wordList,
            boundaryGap: false,
        },
        yAxis: {
            show: false
        },
        series: [
            {
                name,
                data: lineChartData.value[listName],
                type: 'line',
                smooth: true,
                areaStyle: { color: '#C7E7FF' },
                itemStyle: {
                    opacity: 0
                },
                lineStyle: {
                    color: '#5FBBFF'
                }
            }
        ],
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            left: 0,
            top: 0,
            bottom: 0,
            right: 0
        },
    };
}

// 饼图
const getPieOption = () => {
    const { categoryList, goodsList, cTotal, gTotal } = pieChartData.value

    const list = radioSelect.value === '品类' ? categoryList : goodsList
    const total = radioSelect.value === '品类' ? cTotal : gTotal
    return {
        title: [
            {
                text: `${radioSelect.value}分布`,
                textStyle: {
                    fontSize: 14,
                    color: '#666'
                },
                left: 20,
                top: 20
            },
            {
                text: '累计订单量',
                subtext: total,
                textStyle: {
                    fontSize: 18,
                    color: '#999'
                },
                subtextStyle: {
                    fontSize: 14,
                    color: '#333'
                },
                left: '34.5%',
                top: '42.5%',
                textAlign: 'center'
            }
        ],
        legend: {
            orient: "vertical",
            left: '70%',
            top: 'middle',
            textStyle: {
                color: '#8c8c8c'
            }
        },
        series: [
            {
                name: `${radioSelect.value}分布`,
                type: 'pie',
                center: ['35%', '50%'],
                radius: ['35%', '50%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    position: 'outside',
                    formatter: function (params: any) {
                        return params.data.labelName
                    }
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    length: 7,
                    length2: 5,
                },
                data: list,

            },
        ],
        tooltip: {
            // 整个图表项触发
            trigger: 'item',
            // 提示内容及样式
            formatter: (params: any) => {
                /* 
                data: 当前项数据
                marker: 内置提供的圆点标签
                */
                // console.log(params)
                return `${radioSelect.value}分布<br>
                  ${params.marker + params.data.labelName}<br>
                  ${params.marker}数量: ${params.data.value}<br>
                  ${params.marker}占比: ${params.data.percent}
                `
            }
        },
        grid: {
            left: 0,
            top: 0,
            bottom: 0,
            right: 0
        },

    };

}
</script>

<style lang="scss" scoped>
.bottom-view {
    display: flex;
    margin-top: 20px;

    .view {
        flex: 1;

        &:first-child {
            margin-right: 10px;
        }

        &:last-child {
            margin-left: 10px;
        }

        :deep(.el-card__header) {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 60px;
        }

        .search-view {
            height: 450px;
            display: flex;
            flex-direction: column;

            .chart-wrap {
                display: flex;

                .chart {
                    flex: 1;

                    &:first-child {
                        margin-right: 5px;
                    }

                    &:last-child {
                        margin-left: 5px;
                    }

                    .title {
                        font-size: 14px;
                        color: #999;
                    }

                    .count {
                        font-size: 22px;
                        color: #333;
                        font-weight: 500;
                        letter-spacing: 2px;
                    }

                    .echarts {
                        height: 50px;
                    }
                }
            }

            .search-table {
                flex: 1;
                margin-top: 20px;

                .el-pagination {
                    text-align: right;
                    margin-top: 10px;
                }
            }
        }
    }
}
</style>